﻿@{
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
    ViewData["Title"] = "流程控制";
}

<h2>@ViewData["Title"]</h2>

<table class="table table-bordered" style="margin-top:5px;">
    <thead>
        <tr>
            <th>公司名称</th>
            <th>公司地址</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach:unitList">
        <tr>
            <td><input type="text" data-bind="value:unitName" /></td>
            <td><input type="text" data-bind="value:address" /></td>
            <td><button class="btn btn-danger" data-bind="click:$root.removeUnitInfo">删除</button></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <button type="button" class="btn btn-primary" data-bind="click:addUnitInfo">增加</button>
            </td>
        </tr>
    </tfoot>
</table>
<div>
    <label>现有公司信息列表:</label>
    <div data-bind="foreach:unitList">
        <label data-bind="text:'公司名称:'+unitName()+'.公司地址:'+address()+'.'"></label><br />
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        function unitViewModel(name, addressInfo) {
            unitName = ko.observable(name);
            address = ko.observable(addressInfo);
        }

        var viewModel = {
            unitList: ko.observableArray(),

            addUnitInfo: function () {
                viewModel.unitList.push(new unitViewModel("", ""));
            },
            removeUnitInfo: function (unit) {
                viewModel.unitList.remove(unit);
            },
        };

        $(function () {
            ko.applyBindings(viewModel);//完成绑定
            viewModel.unitList.push(new unitViewModel("星城科技", "湖南-长沙"));
            viewModel.unitList.push(new unitViewModel("星城集团", "湖南-长沙"));
            viewModel.unitList.push(new unitViewModel("中车集团", "湖南-株洲"));
        });
    </script>
}



